---
title: Pagination
description: Displays page numbers and controls for navigating paginated data.
shadcnDocsLink: https://ui.shadcn.com/docs/components/pagination
---

<ComponentPreview component="pagination">
  ```tsx file=<rootDir>/src/examples/ui/pagination.tsx
  ```
</ComponentPreview>

## Installation

<Installation component="pagination">
  ```tsx file=<rootDir>/src/components/ui/pagination.tsx
  ```
</Installation>

## Usage

```ts
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from '@/components/ui/pagination'
```

```tsx
<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>
        2
      </PaginationLink>
    </PaginationItem>
    <div className="items-center md:flex hidden">
      <PaginationItem>
        <PaginationLink href="#">3</PaginationLink>
      </PaginationItem>
      <PaginationItem>
        <PaginationEllipsis />
      </PaginationItem>
    </div>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>
```